import React from 'react';
import { Text, View, ScrollView, Image, TextInput, Button, Alert, StyleSheet } from 'react-native';
import { useForm, Controller } from "react-hook-form"


function JjdDetails({route,navigation}) {

  const { control,handleSubmit,formState:{errors}} = useForm({
    defalutValues:{
      firstName: '',
      lastName: '',
    }
  })
  const onSubmit = (data) => {
    console.log(data);
  }
  const Items = ()=> {
    return  (
      <View >
        <Text style={styles.formitemlabel}>标签</Text>
        <Controller
          control={control}
          rules={{
            required: true,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <TextInput
              placeholder="placeholder"
              onBlur={onBlur}
              onChangeText={onChange}
              value={value}
              
            />
          )}
          name="placeholder"
        />
      </View>
    )
  }
  const styles = StyleSheet.create({
    formitemlabel:{
      width: 120
    },
    formitemvalue: {
      width: 200
    }
  })

  return (
    <View style={{flex: 1,}}>
      <Text style={styles.formitemlabel}>外面未封装组件</Text>
      <Controller
        control={control}
        rules={{
          required: true,
        }}
        style={styles.formitemvalue}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="First name"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="firstName"
      />
      {errors.firstName && <Text>This is required.</Text>}

      <Text>----------------------------------</Text>

      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  )
}

export default JjdDetails;